<template>
  <div class="w-full" v-loading="loading">
    <el-button type="primary" class="mb-16px" @click="doEdit()">新增人员</el-button>
    <el-table :data="list">
      <el-table-column label="用户名" prop="nickName"></el-table-column>
      <el-table-column label="账号" prop="userName"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="状态" prop="status" width="120">
        <template #default="{ row }">{{
            row.status === "1" ? "停用" : "正常"
          }}</template>
      </el-table-column>
      <el-table-column label="操作" prop="action">
        <template #default="{ row }">
          <el-button type="text" @click="doEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-show="list.length"
        class="w-full justify-end mt-12px"
        :total="total"
        layout="total, sizes, prev, pager, next"
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[15, 30, 60, 120]"
    ></el-pagination>
    <Empty v-if="!list.length" />
    <el-dialog
        v-model="addVisible"
        width="30vw"
        :title="isAdd ? '新增人员' : '编辑人员'"
        :close-on-click-modal="false"
        @close="handleClose"
    >
      <el-form
          ref="formRef"
          :model="addData"
          :rules="rules"
          label-width="100"
          class="py-16px px-32px"
      >
        <el-form-item label="用户姓名" prop="nickName">
          <el-input
              v-model="addData.nickName"
              placeholder="请输入用户姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="userName">
          <el-input
              v-model="addData.userName"
              :disabled="!isAdd"
              placeholder="请输入手机号"
              :maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="isAdd">
          <el-input
              type="password"
              show-password
              v-model="addData.password"
              placeholder="请输入初始密码"
              :maxlength="16"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addData.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" v-if="!isAdd">
          <el-radio-group v-model="addData.status">
            <el-radio value="0">启用</el-radio>
            <el-radio value="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addVisible = false">取消</el-button>
        <el-button
            type="primary"
            :loading="confirmLoading"
            @click="handleSubmit"
        >确定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useLoading, usePage } from "@/hooks";
import { phoneValidator } from "@/utils/valid";
import { useUserStore } from "@/store";

const userStore = useUserStore();
const { loading, setLoading } = useLoading();
const { page, total } = usePage(10);
const $api = inject("$api");

const list = ref([]);
const getList = async () => {
  setLoading(true);
  try {
    const { data, total: resTotal } = await $api.system.getUserList({
      ...page.value,
    });
    list.value = data;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
    () => page.value,
    () => {
      getList();
    },
    {
      deep: true,
    }
);

const formRef = ref();
const isAdd = ref(false);
const addVisible = ref(false);
const { loading: confirmLoading, setLoading: setConfirmLoading } = useLoading();
const addData = ref({
  nickName: "",
  userName: null,
  password: "",
  email: "",
});
const rules = reactive({
  nickName: [{ required: true, message: "请输入用户姓名" }],
  userName: [{ required: true, validator: phoneValidator }],
  password: [{ required: true, message: "请输入初始密码" }],
  email: [{ type: "email", message: "请输入正确的邮箱格式" }],
});

const handleClose = () => {
  formRef.value.resetFields();
};

const doEdit = (row) => {
  isAdd.value = !row;
  if (row) addData.value = JSON.parse(JSON.stringify(row));
  addVisible.value = true;
};

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      setConfirmLoading(true);
      const apiName = isAdd.value ? "addUser" : "updateUser";
      try {
        await $api.userCenter[apiName]({
          ...addData.value,
          userType: 2,
          companyId: userStore.userInfo?.companyId,
        });
        ElMessage.success(isAdd.value ? "新增成功" : "编辑成功");
        getList();
        addVisible.value = false;
      } finally {
        setConfirmLoading(false);
      }
    }
  });
};

onMounted(() => {
  getList();
});
</script>
